<template>
  <div class="player-bar" ref="playerBarRef">
    <div class="tool-box">
      <span class="tool-btn__play-or-pause" :class="playing ? 'pause' : 'play'" @click="onPlay"></span>
      <span class="tool-btn__close" @click="onClose"><i class="el-icon-close"></i></span>
    </div>

    <div class="play-progress">
      <el-progress :percentage="percentage" :show-text="false" :stroke-width="6"></el-progress>
    </div>
  </div>
</template>

<script>
import _ from 'lodash';
import moment from 'moment';

export default {
  name: 'player-bar',
  props: {
    timeRange: {
      required: true,
    },
    step: {
      type: Number,
      default: 10,
    },
    speed: {
      type: Number,
      default: 1,  // 默认 1s
    },
    // 点击关闭按钮是否删除dom
    destroyToClose: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dateFormat: 'YYYY-MM-DD HH:mm',  // 时间格式化
      percentage: 0,
      selectPosition: 0,  // 选择的点位数值
      max: 0,   // 时间轴最大值, step
      startTime: '',  // 开始时间
      endTime: '',  // 结束时间
      dateTimeList: [],
      playing: false,
      timer: null,  // 定时器
    };
  },
  watch: {
    timeRange: {
      handler(val) {
        if (_.isArray(val) && moment(val[0]).isValid() && moment(val[1]).isValid()) {
          this.reset();
          this.startTime = moment(val[0]).format(this.dateFormat);
          this.endTime = moment(val[1]).format(this.dateFormat);
          this.init();
        }
      },
      immediate: true,
      deep: true,
    },

    selectPosition(val) {
      this.$emit('change', this.getItem(val));
    },

    playing(bool) {
      bool ? this.handlerPlayer() : this.clearTimer();
    },
  },

  beforeDestroy() {
    this.clearTimer();
  },

  methods: {
    init() {
      this.setMax();
      this.setDateTimeList();
    },

    /**
     * 设置时间轴最大值
     */
    setMax() {
      this.max = moment(this.endTime).diff(moment(this.startTime), 'minute');
    },

    /**
     * 设置时间轴时间列表
     */
    setDateTimeList() {
      const startTimeObj = moment(this.startTime);
      this.dateTimeList = [];
      for (let i = 0; i <= this.max; i += this.step) {
        let dateObj = '';
        let dateStr = '';
        if (i === 0) {
          dateObj = moment(this.startTime);
          dateStr = this.startTime;
        } else {
          dateObj = startTimeObj.add(this.step, 'minutes');
          dateStr = dateObj.format(this.dateFormat);
        }

        this.dateTimeList.push({
          value: i,
          dateObj,
          dateStr,
          date: dateObj.format('YYYY-MM-DD'),
          monthAndDate: dateObj.format('MM-DD'),
          hourAndMinute: dateObj.format('HH:mm'),
        });
      }
    },

    getItem(num) {
      const findItem = this.dateTimeList.find(o => o.value === num);
      return findItem ? JSON.parse(JSON.stringify(findItem)) : null;
    },

    /**
     * 播放
     */
    onPlay() {
      this.playing = !this.playing;
    },

    /**
     * 关闭
     */
    onClose() {
      this.playing = false;
      this.$emit('close');
      this.clearTimer();
      this.reset();
      if (this.destroyToClose) {
        this.$refs.playerBarRef.remove();
      }
    },

    /**
     * 清除定时器
     */
    clearTimer() {
      clearInterval(this.timer);
      this.timer = null;
    },

    /**
     * 重置
     */
    reset() {
      this.percentage = 0;
      this.selectPosition = 0;
      this.max = 0;
      this.startTime = '';
      this.endTime = '';
      this.dateTimeList = [];
    },

    handlerPlayer() {
      if (this.selectPosition >= this.max) {
        this.playing = false;
        return;
      }

      const step = (this.step / this.max) * 100;
      this.timer = setInterval(() => {
        if (this.selectPosition >= this.max) {
          this.clearTimer();
          this.playing = false;
          console.log('【播放结束】');
          return;
        }
        this.selectPosition += this.step;
        this.percentage += step;
      }, this.speed * 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.player-bar {
  width: 500px;
  height: 36px;
  background-color: rgba(2, 22, 47, 0.8);
  border-radius: 5px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  position: relative;

  .tool-box {
    display: inline-flex;
    flex-direction: row;
    height: 24px;

    span {
      flex: 0 1 auto;
      display: inline-block;
      height: 24px;
      background-repeat: no-repeat;
      cursor: pointer;
      transition: .2s;
      user-select: none;

      &:hover {
        transform: scale(1.2);
      }
    }

    .tool-btn__play-or-pause {
      width: 24px;
      &.play {
        background-image: url("./img/btn_play.png");
      }
      &.pause {
        background-image: url("./img/btn_pause.png");
      }
    }

    .tool-btn__close {
      width: 24px;
      position: absolute;
      right: 0;
      color: #fff;
      display: inline-flex;
      align-items: center;

      &:hover {
        transform: unset;
        color: #02C5FD;
      }
    }
  }

  .play-progress {
    display: inline-block;
    padding: 0 12px;
    width: calc(100% - 36px);

    ::v-deep .el-progress {
      width: 100%;

      .el-progress-bar__inner {
        background: linear-gradient(90deg, rgba(0, 186, 255, 0.5) 0%, #03C7FF 100%);
      }

      .el-progress__text {
        color: #fff;
      }
    }
  }
}
</style>
